@extends('layout.master')

@section('title','2018中秋节活动中奖名单')

@section('css')
    @parent
    <!-- Daterange picker plugins css -->
    <link href="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.css') }}" rel="stylesheet">
@endsection
@section('main')
    <div class="panel">
        <div class="panel-heading">列表</div>
        <div class="panel-wrapper collapse in" aria-expanded="true">
            <div class="panel-body">
                <div class="table-responsive">
                    <table id="example23" class="display nowrap" cellspacing="0" width="100%"
                           data-url="{{ url(request()->getUri()) }}">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>中奖类型</th>
                            <th>红包金额</th>
                            <th>中奖时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    @parent
    <!-- Plugin JavaScript -->
    <script src="{{ asset('plugins/bower_components/moment/moment.js') }}"></script>
    <!-- Date range Plugin JavaScript -->
    <script src="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <script>
        $('.input-daterange-datepicker').daterangepicker({});
    </script>
    <script>
        var url = $('#example23').data('url');
        var obj = $('#example23');
        obj.DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            "ordering": true,
            "processing": true,
            "responsive": false,
            "lengthMenu": [
                [10, 20, 50, 100],
                ['10 行', '20 行', '50 行', '100 行']
            ],
            "order": [[0, "desc"]],
            "language": {
                "sProcessing": '<div id="fountainG"><div id="fountainG_1" class="fountainG"></div><div id="fountainG_2" class="fountainG"></div><div id="fountainG_3" class="fountainG"></div><div id="fountainG_4" class="fountainG"></div><div id="fountainG_5" class="fountainG"></div><div id="fountainG_6" class="fountainG"></div><div id="fountainG_7" class="fountainG"></div><div id="fountainG_8" class="fountainG"></div></div>',
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "暂无记录",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "末页"
                }
            },
            serverSide: true,
            ajax: {
                url: url,
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            },
            "deferRender": true
        });
        $('.column_filter').on('change', function () {
            obj.DataTable().column($(this).data('column')).search($(this).val(), false, true).draw();
        });
        //跳转页
        $("#example23").append("  到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:27px'> 页 ");
        var oTable = $("#example23").dataTable();
        $('#changePage').keyup(function (e) {
            if ($(this).val() && $(this).val() > 0) {
                var redirectpage = $(this).val() - 1;
            } else {
                var redirectpage = 0;
            }
            oTable.fnPageChange(redirectpage);
        });

    </script>
@endsection